<template>
	<view style="height: 100%;">
		<view class="class-information" :style="{background: 'url('+option.background_pic+')'}">
			<view class="Class-title">{{option.intro}}</view>
			<view class="Class-info">
				<view class="Creact-time">创建时间:{{CreactTime}}</view>
				<view class="suits" v-if="option.age_grade == 'Childhood'">适合人群:儿童</view>
				<view class="suits" v-else-if="option.age_grade == 'Teenagers'">适合人群:青少年</view>
				<view class="suits" v-else-if="option.age_grade == 'University Student'">适合人群:大学生</view>
				<view class="suits" v-else-if="option.Adult == 'Teenagers'">适合人群:成年</view>
				<view class="class-Number">开课数:{{option.startRow}}学员人数:2</view>
				<view class="class-Avter">
					<image :src="option.avatar"></image>
					<view>{{option.nick_name}}</view>
				</view>
			</view>
		</view>
		<view class="Class-nav">
			<view class="ClassNav-tabs" >
				<view v-for="(item,index) in ClassNav" :key="index" :class="{activeNav : ClassNavIndex == index}"  @tap="Selscttabs(index)">{{item}}</view>
			</view>
			<scroll-view class="ClassNav-info" scroll-y="true">
				<view v-if="ClassNavIndex == 0">即将开播</view>
				<scroll-view  v-else-if="ClassNavIndex == 1" scroll-y="true">
					<view class="set_box" v-for="(item,index) in recordedList" :key="index">
						
							<view class="set_time">
								<view>{{item.MMDD}}</view>
								<view style="margin-top: 120upx;font-size: 28upx;">{{item.HMS}}</view>
							</view>
							<view class="set-1">
								<view class="set-2">
									<view class="tlak_o">
										<view class="Class_theme">
											<video id="myVideo" :src="item.record_url"
											@error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls>
											</video>	
											<view class="Class_themes">
												<view>{{item.map.appointmentinfo.title}}</view>
												<view v-if="item.map.appointmentinfo.language_level == 'basis'">语言等级:零基础</view>
												<view v-else-if="item.map.appointmentinfo.language_level == 'Primary'">语言等级:初级</view>
												<view v-else-if="item.map.appointmentinfo.language_level == 'Intermediate'">语言等级:中级</view>
												<view v-else-if="item.map.appointmentinfo.language_level == 'Senior'">语言等级:高级</view>
											</view>
										</view>
									</view>
								</view>
							</view>
						
					</view>
				</scroll-view >
				<scroll-view v-else-if="ClassNavIndex == 2">
					<view class="student-infor">
						<view v-for="(item,index) in studentsList" :key="index" class="member_lists" :class="{Thegray : item.status == 4}" @tap="ClassList(item)">
							<image :src="item.map.userinfo.avatar" mode=""></image>
							<view class="local_time">
								<image :src="item.map.userinfo.background_pic"></image>
								<view >{{item.local_time}}</view>
							</view>
							<view class="member_info">
								<view>
									<view class="member_name">{{item.map.userinfo.nick_name}}</view>
									<view v-if="item.map.userinfo.sex == '1'">
										<image src="../../../static/xingbie_nan.png" class="member_sex"></image>
									</view>
									<view v-if="item.map.userinfo.sex == '2'">
										<image src="../../../static/woman.png" class="member_sex"></image>
									</view>
									<view class="member_identity">{{item.map.userinfo.overseas_identity_name}}</view>
								</view>					
								<view class="member_language">掌握语言:{{item.map.userinfo.languages}}</view>
								<view class="member_city">{{item.map.userinfo.city}}</view>
							</view>
							<view v-if="item.status == '4'" class="online_state">
								<view>离线</view>
							</view>
							<view v-else-if="item.status== '1'" class="online_state">
								<view>在线</view>
							</view>
						</view>
					</view>
				</scroll-view>
				 
			</scroll-view>
			
		</view>
		
		<!--学员详情弹窗 -->
		<view class="PuoPo" v-if="IsPopu" @tap="ClosePopu">
			<view class="PuoPo-content" v-for="(item,index) in ClassListInfo" :key="index" catchtap="">
				<image :src="item.map.userinfo.avatar" class="Popo-avatar"></image>
				<text>{{item.map.userinfo.nick_name}}</text>
				<view class="Pupo-Address">
					<view>
						<image  v-if="item.map.userinfo.sex == 2" src="../../../static/index/woman_selected02.png"></image>
						<image v-else src="../../../static/filter/man_unselect.png"></image>
						<view>25</view>
						<image src="../../../static/wode/local.png"></image>
						<view>{{item.map.userinfo.country}}·{{item.map.userinfo.hometown}}</view>
					</view>
				</view>
				<view class="Gift-Addfriend">
					<view @tap="SendGift">
						<image src="../../../static/giftinfo/Thegifts.png"></image>
						<text>送礼物</text>
					</view>
					<view @tap="Addbuddy">
						<image src="../../../static/giftinfo/Addfriends.png"></image>
						<text>加好友</text>
					</view>
				</view>
				<view v-if="item.map.userinfo.is_help" class="IShelp">
					<view @tap="Personal(item)">
						<image src="../../../static/giftinfo/myInfo.png"></image>
						<text>个人详情</text>
					</view>
					<view @tap="HelpStudDetail">
						<image src="../../../static/giftinfo/HelpInfo.png"></image>
						<text>助学师详情</text>
					</view>
					<view @tap="ToLivein">
						<image src="../../../static/giftinfo/WeekInfo.png"></image>
						<text>直播讲师详情</text>
					</view>
				</view>
			</view>
		</view>
		
		<!--赠送礼物弹窗-->
		<view v-if="IsGift" class="IsGift" @tap="CloseFift">
			<view class="GiftInfo" catchtap="">
				<view class="GiftInfo-header">
					<view class="GiftInfo-headerchlid">猫币剩余:{{cat_coin}}</view>
					<view class="GiftInfo-headerchlid">礼物</view>
					<image src="../../../static/diqiuquan/wenti.png" mode="" class="GiftInfo-headerchlid"></image>
				</view>
				<scroll-view scroll-x="true" class="GiftInfos">
					<block v-for="(item,index) in GiftList" :key="index"  >
						<view class="GiftInfos-child" :class="{Giftactive : GiftListIndex == index}" @tap="SelectGift(item,index)">
							<view class="GiftInfos-pic">
								<image :src="item.pic" mode=""></image>
							</view>
							<text class="GiftInfos-title">{{item.gift_name}}</text>
							<text class="GiftInfos-title">猫币X{{item.amount}}</text>
						</view>
					</block>
				</scroll-view>
				<view class="SendButon">
					<input type="number" @input="GetInputValue"/>
					<view @tap="sendGiftToStudent">发送</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageURL:'/static/index/logo.png',
				ClassNav:['即将开播','直播回放','学员'],
				ClassNavIndex:'1',
				talk: [{
						"id": 1,
						"MMDD": "04-15",
						"HMS": "10:30",
						"data": [{
							"doc": {
								"talk": "#话题交流/学习教育",
								"imgUrl": "/static/index/logo.png",
								"Numeber":'100'
							}
						}]
				}],
				option:'',
				studentsList:'',
				roomID:'',
				CreactTime:'',
				recordedList:'',//录播
				ClassListInfo:[],//学员详细信息列表,
				IsPopu:false,//学员信息弹窗是否显示
				IsGift:false,//礼物是否显示
				GiftList:[],//可送礼物列表
				cat_coin:'',//猫币数量
				GiftListIndex:'',//给选中的礼物添加样式
				GiftInfoSend:[],//选中礼物信息
				GetValue:'',//输入的礼物数量
				payment_id:'',//收礼物人id
				pay_id:'',
				url:'',
				NumberOf:'',//免费加好友次数
			}
		},
		onReady: function (res) {
		    this.videoContext = uni.createVideoContext('myVideo');
		        this.videoContext.requestFullScreen();
		},
		onLoad(options) {
			this.option = JSON.parse(options.itemRoom)//获取房间id
			this.roomID = this.option.roomID
			this.pay_id = this.option.pay_id
			console.info(this.pay_id)
			this.CreactTime = this.option.create_time
			var date = new Date(this.CreactTime);//把时间戳转换为时间
			var Y = date.getFullYear() + '-';
			var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
			var D = date.getDate() + ' ';
			this.CreactTime = Y + M + D;
			this.Selscttabs(this.ClassNavIndex = '1')
		},
		methods: {
			Selscttabs(e){//选项标签
				var _this = this
				_this.ClassNavIndex = e
				if(_this.ClassNavIndex == 0){
					console.info('即将开播')
				}else if(_this.ClassNavIndex == 1){//获取直播回放列表
					var data = {
						group_id:_this.option.roomID,
						// appointment_id:_this.option.appointment_id,
						// cover:_this.option.cover,
						// create_time:_this.option.create_times,
						// end_time:_this.option.end_time,
						// id:_this.option.id,
						// start_time:_this.option.start_time,
						// user_id:_this.option.user_id,
						// status:_this.option.status,
					}
					this.myAjaxNew({
						model: 'message',
						controllerName: 'groupRecording',
						actionName: 'queryListPage',
						data: data,
						successBack: function(res) {
							_this.recordedList = res.data.data
							_this.recordedList.map(item=>{
								var timer = item.create_time.trim().split(" ")
								item.HMS = timer[1]
								var ytr = timer[0].slice(5)
								item.MMDD = ytr
								console.log(timer,'9999')
							})
						},
					})
					console.info('回放')
				}else if(_this.ClassNavIndex == 2){
					console.info('评论')
					var data  ={
						group_id:_this.option.roomID,
					}		
					this.myAjaxNew({//获取成员列表
						model: 'message',
						controllerName: 'messageJoinGroup',
						actionName: 'queryListPage',
						data: data,
						successBack: function(res) {
							_this.studentsList =res.data.data
							_this.studentsList.map(item=>{//把后台给的时间戳转化成具体的时间
								var date = item.map.userinfo.local_time,y,m,d,h,mm,s;
								date = new Date(date);
								y = 1900 + date.getYear();
								m = "0" + (date.getMonth()+1);
								d = "0" + date.getDate();
								h = "0" + date.getHours();
								mm = "0" +  date.getMinutes();
								s = "0" +  date.getSeconds();
								date =  h.substring(h.length-2, h.length) + ":" + mm.substring(mm.length-2, mm.length);
								item.local_time=date
							})
							const handle = (property) => {
							    return function(a,b){
							        const val1 = a[property];
							        const val2 = b[property];
							        return val1 - val2;
								}
							}
							_this.studentsList.sort(handle('status'));//排序处理在线的在前离线的在后
							console.log(_this.studentsList,'排序后的')
						}					
					})
				}
			},
			ClassList(e){//获取学员详细信息弹窗
				let _this = this
				_this.ClassListInfo.push(e)//把对象转成数组遍历
				_this.IsPopu = true
				_this.payment_id = _this.ClassListInfo[0].map.userinfo.user_id
				_this.url = _this.ClassListInfo[0].map.userinfo.url
				console.info(_this.ClassListInfo,'99090')
			},
			ClosePopu(){
				this.IsPopu = false
				this.ClassListInfo = []
			},
			Personal(e){//前往学员详情页面
				console.info(this.url)
				var urls= encodeURIComponent(this.url)
				uni.navigateTo({
					url: '/pages/Other/web-view/web-view?url=' +urls
				});
			},
			HelpStudDetail(){//前往助学师详情页
				uni.navigateTo({
					url:'/pages/Other/Detailstutors/Detailstutors?user_id='+this.payment_id+'',
					icon:'none'
				})
			},
			ToLivein(){//前往直播讲师页面
				uni.navigateTo({
					url:'/pages/Other/LiveinStructor/LiveinStructor?user_id='+this.payment_id+''
				})
			},
			SendGift(){//赠送礼物弹窗
				let _this = this
				_this.IsPopu = false
				_this.IsGift = true
				this.myAjaxNew({
					model: 'user',
					controllerName: 'userGift',
					actionName: 'query',
					data: '',
					successBack: function(res) {
						_this.cat_coin = uni.getStorageSync('cat_coin')
						_this.GiftList = res.data.data
						console.log(res)
						console.log(_this.cat_coin)
					},
				})
			},
			CloseFift(){//关闭礼物窗口
				this.IsGift = false
				this.GiftInfoSend = ''//清空选择
				this.GetValue = ''
			},
			SelectGift(e,ins){//选择礼物
				let _this = this
				_this.GiftListIndex = ins
				_this.GiftInfoSend = e
			},
			Addbuddy(){//添加好友
				var _this = this
				var userId = parseInt(uni.getStorageSync('user_id'))
				var data = {
					user_id:userId,
				}
				_this.myAjaxNew({
					model: 'user',
					controllerName: 'userOrder',
					actionName: 'queryFreeFriendsCount',
					data: data,
					successBack: function(res) {
						console.log(res)
						_this.NumberOf = res.data.data.freeCount
						uni.showModal({
							title: '提示',
							content: '你需要送一份见面礼表示诚意(每天3次加好友免费,还剩'+_this.NumberOf+'次)',
							 cancelText:'我在想想',
							success: function (res) {
								if (res.confirm) {
									if(_this.NumberOf == '0'){
										uni.showToast({
											title:'免费加好友次数已用完',
											icon:'none'
										})
									}
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});			
					}
				})
				
			},
			GetInputValue(e){
				var thsss = e.detail.value
				this.GetValue = parseInt(thsss);		
			},
			sendGiftToStudent(){//发送礼物
				let _this = this
				console.info(this.GetValue,'输入框的值')
				console.info(this.GiftInfoSend,'送的礼物')
				if(this.GetValue == '' || this.GiftInfoSend == ''){
					uni.showToast({
						title:'请输入礼物数量或者选择要送的礼物',
						icon:'none'
					})
				}else{
					console.info(_this.payment_id,'99090')
					console.info('赠送礼物')
					var userId = parseInt(uni.getStorageSync('user_id'))
					var data = {
						type_id:_this.GiftInfoSend.id,
						type:'gift',
						source:'class',
						pay_id:_this.pay_id ,
						user_id:userId,
						is_group: false,
						payment_ids:_this.payment_id,
						gift_count:_this.GetValue,
						pay_count:_this.GetValue*_this.GiftInfoSend.amount,					
					}
					_this.myAjaxNewPost({//获取我的班级列表
						model: 'user',
						controllerName: 'userOrder',
						actionName: 'insert',
						data: data,
						successBack: function(res) {
							console.log(res,'赠送了啊')
						},
					})
				}
			}
		}
	}
</script>

<style scoped lang="less">
	.class-information{
		display: flex;
		width: 100%;
		height: 40%;
		background-position: center center;
		background-size: 100% 100%!important;
		background-repeat: no-repeat!important;
	}	
	.Class-title{
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: center;
	}
	.Class-info{
		display: flex;
		width: 90%;
		align-items: center;
		font-size: 26upx;
		color: #FFFFFF;
		letter-spacing: 8upx;
		/* height: 10vh; */
		flex-wrap: wrap;
		position: absolute;
		left: 5%;
		top: 25vh;
	}
	.Class-info image{
		width: 60upx;
		height: 60upx;
		border-radius: 30upx;
	}
	.Class-info view{
		display: flex;
		width: 100%;
	}
	/*tabs选项卡样式*/
	.Class-nav{
		position: relative;
		width: 100%;
		height: 60%;
		background: #FFFFFF;
		color: #000;
	}
	.ClassNav-tabs{
		display: flex;
		width: 100%;
		height: 16%;
		flex-wrap: wrap;
		align-content: flex-center;
		align-items: center;
		justify-content: space-around;
		
	}
	.ClassNav-tabs view{
		display: flex;
		height: 120upx;
		align-items: center;
		justify-content: center;
	}
	.ClassNav-info{
		position: relative;
		width: 100%;
		height: 84%;
		overflow: hidden;
	}
	.activeNav{/*tabs点击后的样式*/
		color: #00BCBB;
		border-bottom: 3upx solid #00BCBB;
	}
	.set_box {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: row;
	}
	.Class_theme{
		display: flex;
		width: 100%;
		height: 200upx;
	}
	.Class_theme video {
		width: 180upx;
		height: 180upx;
		margin-bottom: 40upx;
		margin-right: 20upx;
	}
	.Class_themes{
		flex: 1;
		width: 100%;
		height: 100%;
	}
	.Class_themes view{
		display: flex;
		width: 100%;
		height: 80upx;
		flex-wrap: wrap;
	}
	/* 左侧时间 */
	.set_time {
		width: 10%;
		position: relative;
	}
	.set_time view {
		position: absolute;
		margin-top: 60upx;
		right: -40rpx;
		color: #999999;
	}
	/* 右侧内容 */
	.set-2 {
		min-height: 200upx;
		border-radius: 10upx;
		width: 84%;
		margin-left: 100upx;
		margin-top: 60upx;
		padding-right: 10rpx;
		position: relative;
	}
	.tlak_o {
		width: 100%;
		min-height: 200upx;
	}
	.set-1 {
		width: 90%;
	}
	
	
	
	.set-2::after {
		content: '';
		/* 必须存在如果没有图标就留空 */
		top: -20upx;
		/* 定位 距离*/
		border-left: #c6c6c6 1px solid;
		/* 横线颜色 */
		left: -44upx;
		/* 定位 距离*/
		height: 120%;
		/* 高度 */
		position: absolute;
		/* 定位 */
	}
	
	.set-2::before {
		content: "\e64d";
		/* 必须存在如果没有图标就留空 */
		color: #c6c6c6;
		/* 设置颜色 */
		position: absolute;
		/* 定位 */
		left: -58upx;
		top: -20upx;
		/* 移动到左边 */
		font-weight: bold;
		/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
		font-family: "iconfont" !important;
		/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
		font-size: 30upx;
		/* 图标大小 */
		font-style: normal;
		/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
		-webkit-font-smoothing: antialiased;
		/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
		-moz-osx-font-smoothing: grayscale;
		/* 图标样式在复制的图标文件中复制相对应的图标样式必须存在 */
	}
	
	@font-face {
		font-family: "iconfont";
		src: url('//at.alicdn.com/t/font_1337773_f06f5a7las.eot?t=1565581133395');
		/* IE9 */
		src: url('//at.alicdn.com/t/font_1337773_f06f5a7las.eot?t=1565581133395#iefix') format('embedded-opentype'),
			/* IE6-IE8 */
			url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOIAAsAAAAAB8QAAAM7AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqCRIIjATYCJAMUCwwABCAFhG0HZhvNBsiemjwJqJERRCC3tX4YOM4iqNbCnr29uw8wKGBUsUAKqDyCjY5HcEzCALron1wr8wDk8hKBFpIc5yaXfWZJoIBIQkF1KlvVqWuFfZ3c/CBw0p8fcMJJsQY6uIuEMk8188LgXgfHTJceiXlrm0tGajTgaMCz2T6yyf5BXh+Ef9BdxMSIS9cTaKmvYGbzFhRXA1sZ2C0QO7cRAdhadnmkNTSEqufYLM4qNdKx9AJn+M/Hb2OiQVIWwL6rNufIIP1bj29voaZspAiK/byITqLAaEAmdvX6d7KQ+dEstCw2tjQL0FJDkvZald8e//3y+WglCIaW0E/e5R8vERWvuTWY5RYy3/ywXBtKXBEF395EBN++FCQ8V5CWsmEt4CBgHMz1Ad8rde7s2LbD7oUhT3l+eWHbhxwOB+LFrfkVL7I3FIAWdpdWvfHiYt8FltYWdzy1Pz/WfPhQ/elT7efPvUJiVlRsIj8+18X3az7+5Wb48vVrbnvo7OndVe1cPc55k2ebWG7OmMgYX01bT3vJnNlJWtemes0mn3vI/PJl80NQQqVErfcH/Ys5Fy3evrVoyyZNDLSq/cp5EyYsKTbb69bD/+5fmPs/cFwxG9ABoCNdTY+AKrwdi2npHk0Xu4vMH/Q7Wl+4+Yftkv83kMHXTiVutOlsnh68ZYPZit+hmDmRSxVwlDnvxvI8WOq3gz4VCy3xE8Id/d7H2GV2M6Ghi4ak1gcKDYORGTsaSq2Mg0rDTGhplLyTW+mEsRC5BUYadyC0dwpJWw+h0N53ZMb+glJX/6DSPgpoaUN4nLOVobGtZdYuJHAkQ7EbqiVqwMjF7UVrJSKKTmCmitNrETOpUzAiNLxZykMGxPY4wNRBIjnHEDOqh7nOzZBOR6GRUQ2SeKiKc2NiWBju+6JQieqBvbkYRMAhMkjUDVKTUAaYzufsW99fCSEUOgI20rMQr4UwJurloQihwmcg8/SGWT3v8hKTDkQkjsMgjKH0oFzHi+hgnoKM/VtpIBIulGpF1ihRmDcLz9WHnm/Uv0BZNAD40zJSFJGjjEq77dsEg1ahKoF2qbupYvP0KNS2e69WbmucSNZAOpEa5XpUagAAAA==') format('woff2'),
			url('//at.alicdn.com/t/font_1337773_f06f5a7las.woff?t=1565581133395') format('woff'),
			url('//at.alicdn.com/t/font_1337773_f06f5a7las.ttf?t=1565581133395') format('truetype'),
			/* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
			url('//at.alicdn.com/t/font_1337773_f06f5a7las.svg?t=1565581133395#iconfont') format('svg');
		/* iOS 4.1- */
	}
	
	.iconfont {
		font-family: "iconfont" !important;
		font-size: 16px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}
	
	.icon-yuandian:before {
		content: "\e64d";
	}
	
	.icon-dingweiweizhi:before {
		content: "\e619";
	}
	/*学员信息样式*/
	.student-infor{
		position: relative;
		width: 100%;
		height: auto;
		overflow: hidden;
	}
	.member_lists{
		display: flex;
		width: 100%;
		height: 160upx;
		margin: 0 auto;
		border-top: 1px #DCDCDC solid;
		align-items: center;
		background: #FFFFFF;
	}
	.memberlist:last-child{
	  border-bottom:1px #DCDCDC solid;
	}
	.member_lists image{
		width: 100upx;
		height: 100upx;
		border-radius: 100upx;
		margin-left: 4%;
		
	}
	.member_info{
		display: flex;
		flex-wrap:wrap;
		width: 70%;
		flex-direction:row-reverse;
		flex-wrap:wrap;
		justify-content:center;
		align-items:center;
		height: 100upx;
		padding-left: 2%;
	}
	.member_info>view{
		display: flex;
		width: 100%;
		height: 27upx;
	}
	.member_name{
		font-size: 20upx;
	}
	.member_identity{
		font-size: 18upx;
		height: 40upx;
		line-height: 20px;
		/* border: 1px #DCDCDC solid; */
		color: #06C1AE;
		border-radius: 10upx;
		margin-left: 4%;
	}
	.member_sex{
		width: 25upx!important;
		height: 25upx!important;
		padding-left: 24%;
		padding-bottom: 15upx;
	}
	.member_language{
		font-size: 18upx;
		color: #BEBEBE;
	}
	.member_city{
		font-size: 18upx;
	}
	.online_state{
		display: flex;
		align-items:center;
		font-size: 26rpx;
		color: #BEBEBE;
	}
	.local_time{
		display: flex;
		width: 90upx;
		height: 30upx;
		justify-content: space-between;
		background: #CDC9C9;
		text-align: center;
		position: absolute;
		left: 20upx;
		font-size: 20upx;
		border-radius: 20upx;
		margin-top: 40upx;
	}
	.local_time image{
		width: 20upx;
		height: 20upx;
		border-radius: 20upx;
	}
	//弹窗样式
	.PuoPo{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0,0,0,0.4);
		position: absolute;
		top: 0;
		left: 0;
	}
	.Popo-avatar{
		width: 120upx;
		height: 120upx;
		border-radius: 60upx;
		background: rgba(190,190,190,0.7);
		position: absolute;
		top: -60rpx;
		left: 40%;
	}
	.PuoPo-content{
		width: 86%;
		height: 700upx;
		background: #FFFFFF;
		color: #000000;
		position: absolute;
		top: 10%;
		text{
			position: relative;
			width: 100%;
			height: 40upx;
			display: flex;
			justify-content: center;
			margin-top: 100upx;
		}
	}
	.Pupo-Address{
		position: relative;
		width: 100%;
		height: 120upx;
		text-align: center;
		margin:0 auto;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
		font-size:26upx;
		// color:#E7E7E7;
		view{
			position: relative;
			top: 50%; /*偏移*/
			transform: translateY(-50%);	
			display: flex;
			height: 100%;
			align-items: center;
			justify-content: center;
			padding-left:30upx;
		}
		image{
			width: 30upx;
			height: 40upx;
			padding-left:30upx;
		}
	}
	.signature{
		display: flex;
		width: 100%;
		height: 80upx;
		font-size: 28upx;
		justify-content: center;
		align-items: center;
	}
	.Gift-Addfriend{
		display: flex;
		width: 100%;
		height: 140upx;
		justify-content:center;
		view{
			display:flex;
			flex-wrap:wrap;
			justify-content: center;
			align-items: center;
			text{
				position: relative;
				margin: 0 auto;
				font-size: 26upx;
				// color: #EBECED;
			}
		}
		align-items:center;
		image{
			width: 60upx;
			height: 60upx;
		}
	}
	.IShelp{
	display: flex;
	width: 100%;
	height: 230upx;
	justify-content:center;
	font-size:28upx;
	view{
		display:flex;
		width:100%;
		flex-wrap:wrap;
		justify-content: center;
		align-items: center;
		text{
			position: relative;
			margin: 0 auto;
		}
	}
	align-items:center;
	image{
		width: 60upx;
		height: 60upx;
	}	
	}
	/*赠送礼物的样式*/
	.IsGift{
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background: rgba(0,0,0,0.4);
		position: absolute;
		top: 0;
		left: 0;
	}
	.GiftInfo{
		width: 100%;
		height: 560upx;
		background: #FFFFFF;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.GiftInfo-header{
		display: flex;
		width: 90%;
		border-bottom: 1upx solid #E4E4E4;
		text-align: center;
		align-items: center;
		justify-content: center;
		height: 100upx;
		margin: 0 auto;
		.GiftInfo-headerchlid{
			flex: 1;
		}
		image{
			width: 20upx!important;
			height: 20upx!important;
		}
	}
	.GiftInfos{
		display: flex;
		width: 100%;
		height: 300upx;
		white-space: nowrap;//滚动属性
		 margin: 0 auto;
		.GiftInfos-child{
			width: 24%;
			margin-right: 20upx;
			display: inline-block;
			vertical-align: top;
			.GiftInfos-pic{
				width: 100%;
				 display: inline-block;
				 text-align:center;
				 image{
					width: 110upx;
					height: 120upx;
					border-radius: 6upx;
				 }
			}
			.GiftInfos-title {
				display: block; // 让字体换行
				width: 90%;
				font-size: 30upx;
				line-height: 40upx;
				text-align: center;
				padding-bottom: 20rpx;
			}
		}	
	}
	.Giftactive{//点击选中礼物后的样式
		border: 1upx solid #06C1AE;
	}
	.SendButon{
		display: flex;
		width: 40%;
		height: 80upx;
		border: 1upx solid #00BCBB;
		border-radius: 40upx;
		position:absolute;
		right:20upx;
		bottom:20upx;
		input{
			width: 60%;
			height: 100%;
			color: #00BCBB;
			padding-left: 20upx;
		}
		view{
			width: 40%;
			background: #00BCBB;
			line-height: 80upx;
			text-align: center;
		}
	}
	/*离线人员灰度处理*/
	.Thegray{
		background: rgba(192,192,192,0.4);
	}
</style>
